<template>
  <div class="link-layer-content flex">
    <div class="link-layer-left">
      <ul>
        <li :class="linkTypeFirst == '1' ? 'active' : ''" @click="setLinkTypeFirst('1')">商城链接</li>
      </ul>
    </div>
    <div class="link-layer-right flex-item">
      <div v-if="linkTypeFirst == '1'" class="link-list">
        <div>
          <h2 class="flex v-align-c">
            <label></label>
            <span>基础链接</span>
          </h2>
          <ul>
            <li v-if="appType == 10" class="mar-r-11 mar-b-10" @click="setLinkType('1001', '基础链接 - 领券中心')"><el-button size="small" plain>领券中心</el-button></li>
            <li class="mar-r-11 mar-b-10" @click="setLinkType('1005', '基础链接 - 首页')"><el-button size="small" plain>首页</el-button></li>
            <li class="mar-r-11 mar-b-10" @click="setLinkType('1006', '基础链接 - 分类')"><el-button size="small" plain>分类</el-button></li>
            <li v-if="appType == 10" class="mar-r-11 mar-b-10" @click="setLinkType('1007', '基础链接 - 购物车')"><el-button size="small" plain>购物车</el-button></li>
            <li v-else class="mar-r-11 mar-b-10" @click="setLinkType('1007', '基础链接 - 进货单')"><el-button size="small" plain>进货单</el-button></li>
            <li class="mar-r-11 mar-b-10" @click="setLinkType('1008', '基础链接 - 个人中心')"><el-button size="small" plain>个人中心</el-button></li>
            <li v-if="appType == 10" class="mar-r-11 mar-b-10" @click="setLinkType('1009', '基础链接 - 内容中心')"><el-button size="small" plain>内容中心</el-button></li>
          </ul>
        </div>
        <div v-if="appType == 10">
          <h2 class="flex v-align-c">
            <label></label>
            <span>直播</span>
          </h2>
          <ul>
            <li class="mar-r-11" @click="setLinkType('1401', '直播 - 直播列表')"><el-button size="small" plain>直播列表</el-button></li>
          </ul>
        </div>
        <div v-if="appType == 10">
          <h2 class="flex v-align-c">
            <label></label>
            <span>活动</span>
          </h2>
          <ul>
            <li class="mar-r-11" @click="setLinkType('1501', '活动 - 限时秒杀')"><el-button size="small" plain>限时秒杀</el-button></li>
            <li v-if="getEnterpriseConfig().groupBuyAuthority == 1" class="mar-r-11" @click="setLinkType('1502', '活动 - 社区团购')"><el-button size="small" plain>社区团购</el-button></li>
          </ul>
        </div>
        <div>
          <h2 class="flex v-align-c">              
            <label></label>
            <span>自定义页面</span>
          </h2>
          <ul>
            <li v-for="(item, index) in pageList" :key="index" class="mar-r-11 mar-b-10" @click="setLinkType('1101', '自定义页面 - ' + item.pageTitle, item)">
              <el-button size="small" plain>{{item.pageTitle}}</el-button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { listCustomPage } from '@/api/custom-page/page'

  export default {
    props: {
      link: {
        type: Object,
        default: {}
      },
      appType: {
        type: Number,
        default: 10
      }
    },
    data() {
      return {
        linkTypeFirst: '1',
        pageList: []
      }
    },
    // 初始化页面
    created() {
      listCustomPage({
        enterpriseId: this.getEnterpriseId(),
        appType: this.appType,
        pageType: 11
      }).then(response => {
        if (response.isError) return
        this.pageList = response.data
      })
    },
    mounted() {
    },
    methods: {
      setLinkTypeFirst(linkTypeFirst) {
        this.linkTypeFirst = linkTypeFirst
      },
      setLinkType(linkType, linkRemark, linkParams) {
        this.link.linkParams = ''
        this.link.linkType = linkType
        this.link.linkRemark = linkRemark
        if (linkType === '1101' && linkParams) {
          this.link.linkParams = '?pageId=' + linkParams.pageId
        }
        this.$emit('selectLink', this.link)
      }
    }
  }
</script>
